<template>
	<view class="main">
		<view class="header">
			<view class="loading">
				<u-loading-page :loading="loading"></u-loading-page>
				<!-- 分段器 -->
				<view class="subsection">
					<u-sticky :offset-top="offsetTop">
						<u-subsection :list="list" :current="current" activeColor="#1ba784" @change="currentIndexChange"
							fontSize="14"></u-subsection>
					</u-sticky>
				</view>
			</view>
		</view>
		<!-- <view class="fgx">

		</view> -->
		<view class="content">
			<view class="name">
				<span>{{data.name}}</span>
			</view>
			<view class="center">
				<u-read-more ref="uReadMore" :showHeight="showHeight">
					<u-parse :content="data.description||data.introduce" @load="load" color="#1ba784"></u-parse>
				</u-read-more>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//吸顶的高度
				offsetTop: 20,
				list: ['介绍', '益处', '其他'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				current: 0,
				//控制加载load
				loading: true,
				resultMap: ["", "/sport", "/dish"],
				//保存数据
				data: {},
				//控制显示的高度
				showHeight: 300
			};
		},
		methods: {
			currentIndexChange(index) {
				this.current = index;
				console.log(index);
			},
			//兼容微信小程序，加快加载速度
			load() {
				this.$refs.uReadMore.init();
			}
		},
		onLoad(options) {
			//删除分段器索引为1处的值
			this.$request(`${this.resultMap[options.type]}/query/${options.id}`, "GET").then(res => {
				this.loading = false;
				this.data = res.data.data;
				//设置标题
				uni.setNavigationBarTitle({
					title: this.data.name
				})
			}).catch(error => {
				console.log(`${error.data.message}`);
			})

		},
	}
</script>

<style lang="scss" scoped>
	.subsection {
		margin-top: 2%;
		padding: 0% 2%;
	}

	.content {
		.name {
			margin-top: 1em;
			margin-left: 1em;
			font-size: 16px;
			font-weight: 600;
		}

		.center {
			margin-top: 2%;
			padding: 0% 5%;
		}
	}
</style>